import React from "react"
import { CalendarOutlined, FolderOutlined } from "@ant-design/icons"
import s from "./style.module.less"
import { useNavigate } from "react-router-dom"
export default function Plate({ list, top, id }) {
  const navigate = useNavigate()
  const handleNavgate = (id) => {
    navigate(`/article/${id}`)
  }
  return (
    <div className={s.card} onClick={() => handleNavgate(id)}>
      <img src={list.cover} className={s.img} />
      <div className={s.content}>
        <div className={s.lable}>
          {list.tags.map((item) => {
            return <span key={item.id}>{item.name}</span>
          })}
        </div>
        <div className={s.title}>
          <a>{list.title}</a>
        </div>
        <span className={s.summary}>{list.summary}</span>
        <div className={s.footer}>
          <CalendarOutlined />
          <span style={{ marginRight: "20px" }}>{list.createDate}</span>
          <FolderOutlined />
          <a>{list.category.name}</a>
        </div>
      </div>
      {top && <div className={s.top}>置顶</div>}
    </div>
  )
}
